<template>
  <div class="page-container">
    <el-container>
      <el-header height="150px">
        <div style="width:100%;height:150px;border-color:red;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px">
          <!--工具栏-->
          <div class="toolbar" style="float:left;padding-top:20px;padding-left:20px;">
            <el-form :inline="true" :model="filters" :size="size" ref="filters">
              <el-form-item label="时间范围">
                <el-date-picker
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  v-model="filters.startEndDate"
                  style="width:400px"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item prop="terminal">
              <el-radio-group v-model="filters.terminal">
                <el-radio-button label="pc"></el-radio-button>
                <el-radio-button label="html5"></el-radio-button>
                <el-radio-button label="ios"></el-radio-button>
                <el-radio-button label="android"></el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-row>


              <el-form-item prop="merchant" label="省">
                <el-select v-model="filters.province" placeholder="选择" style="width:120px">
                  <el-option label="区域不限" value="0" ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="city" label="市">
                <el-select v-model="filters.city" placeholder="选择" style="width:120px">
                  <el-option label="区域不限" value="0"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item prop="district" label="区" style="margin-right:25px">
                <el-select v-model="filters.district" placeholder="选择" style="width:120px">
                  <el-option label="区域不限" value="0"></el-option>
                </el-select>
              </el-form-item>


              <el-form-item prop="channel" label="回访事件">
                <el-select v-model="filters.visitEvent" placeholder="选择" style="width:140px">
                  <el-option v-for="item in visitEventsOptions"
                    :key ="item.value"
                    :label ="item.name"
                    :value ="item.value"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <kt-button
                  icon="fa fa-search"
                  :label="$t('action.search')"
                  type="primary"
                  @click="findPage()"
                />
              </el-form-item>
            </el-row>
          </el-form>
          </div>
        </div>
      </el-header>
      <el-main>
        <div style="width:100%;height:450px;border-color:red;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px">
          <div class="toolbar" id="lineChart"
               style="float:left;padding-top:20px;padding-left:20px;width:1000px;height:400px">
          </div>
        </div>

      </el-main>
      <el-main>
        <div style="width:100%;height:150px;border-color:red;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px">
          <!--表格内容栏-->
          <cy-table
            :height="350"
            :data="pageResult"
            :columns="filterColumns"
            :showOperation="false"
            :showEditOperation="false"
            :showDeleteOperation="false"
            :showBatchDelete="false"
            @findPage="findPage"
            :showSelection="false"
            ref="CyTable"
          ></cy-table>
        </div>
      </el-main>
    </el-container>

  </div>
</template>

<script>

  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import {format} from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";

    export default {
        components: {
          CyTable,
          KtButton,
          TableColumnFilterDialog
        },
        name: "UserRetention",
        data() {
          return {
            filterColumns: [],
            pageRequest: {pageNum: 1, pageSize: 10},
            pageResult: {},
            size: "small",
            filters:{
              startEndDate:"",
              province:"",
              city:"",
              district:"",
              terminal:"",
              visitEvent:"",
              res: {
                "total": 1,
                "code": "0000",
                "rows": [
                  {"dateStr":"2019-12-25","newRegister":0,"sameDay":"0.00%","day1":"0.00%",
                  "day2":"0.00%","day3":"0.00%","day4":"0.00%","day5":"0.00%","day6":"0.00%"}
                ]
              }
            },

            columns: [
              {prop: "dateStr", label: "时间", minWidth: 120},
              {prop: "newRegister", label: "新注册客户数", minWidth: 120},
              {prop: "sameDay", label: "当天", minWidth: 120},
              {prop: "day1", label: "第1天", minWidth: 120},
              {prop: "day2", label: "第2天", minWidth: 120},
              {prop: "day3", label: "第3天", minWidth: 120},
              {prop: "day4", label: "第4天", minWidth: 120},
              {prop: "day5", label: "第5天", minWidth: 120},
              {prop: "day6", label: "第6天", minWidth: 120}
            ],

            mylineLegend: ['用户留存'],
            mylineseriesdatas:[{name:'昨天',data:[175,70,28,26,9,5,2]}],
            mylineXAxisData: ["2019-12-24", "2019-12-25", "2019-12-26", "2019-12-27", "2019-12-28", "2019-12-29", "2019-12-30"],

            visitEventsOptions:[
              {
                "name": "任意事件",
                "value": -1,
                "sort": 0
              },
              {
                "name": "访问首页",
                "value": 0,
                "sort": 1
              },
              {
                "name": "搜索产品",
                "value": 1,
                "sort": 2
              },
              {
                "name": "访问详情页",
                "value": 2,
                "sort": 3
              },
              {
                "name": "收藏",
                "value": 3,
                "sort": 4
              },
              {
                "name": "添加购物车",
                "value": 4,
                "sort": 4
              },
              {
                "name": "提交订单",
                "value": 6,
                "sort": 5
              },
              {
                "name": "支付订单",
                "value": 7,
                "sort": 6
              },
              {
                "name": "取消订单",
                "value": 8,
                "sort": 6
              },
              {
                "name": "退款",
                "value": 9,
                "sort": 6
              },
              {
                "name": "访问活动页",
                "value": 10,
                "sort": 2
              },
              {
                "name": "取消收藏",
                "value": 11,
                "sort": 4
              },
              {
                "name": "立即购买",
                "value": 15,
                "sort": 4
              },
              {
                "name": "分享",
                "value": 18,
                "sort": 4
              }
            ]
          }
        },

        methods: {
          findPage:function () {
            this.$refs.CyTable.findPageStaticState(this.filters);
          },

          // 处理表格列过滤显示
          initColumns: function () {
            let temp = [];

            $.each(this.columns, function (key, val) {
              temp.push(val);
            });
            this.filterColumns = temp;
          },
        },
        mounted() {
          this.$mychart.myLineChartMutSmooth('lineChart',this.mylineLegend,this.mylineXAxisData, this.mylineseriesdatas, "用户留存");
          this.initColumns();
        }
    }
</script>

<style scoped>

</style>
